<template>
	<div>
		<div class="resource_tabs">
			<div class="resource_tabitem">
				<el-button @click="changeTab(1)" :type="activeTab == '1' ?'primary':''">实验资源</el-button>
			</div>
			<div class="resource_tabitem">
				<el-button @click="changeTab(2)" :type="activeTab == '2' ?'primary':''">实验步骤</el-button>
			</div>
			<div class="resource_tabitem">
				<el-button @click="changeTab(3)" :type="activeTab == '3' ?'primary':''">实验报告</el-button>
			</div>
		</div>
		<resource @changeDoing='changeDoing' v-if="activeTab == '1'" :vrResourceDetailId='vrResourceDetailId'></resource>
		<step @changeDoing='changeDoing' v-if="activeTab == '2'" :vrResourceDetailId='vrResourceDetailId'></step>
		<report @changeDoing='changeDoing' v-if="activeTab == '3'" :vrResourceDetailId='vrResourceDetailId'></report>
	</div>
</template>

<script>
	import resource from "./components/resource.vue"
	import step from "./components/step.vue"
	import report from "./components/report.vue"
	export default {
		components: {
			resource,
			step,
			report
		},
		data() {
			return {
				vrResourceDetailId:this.$route.query.vrResourceDetailId,
				activeTab: 1,
				isChange:false,

			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			changeDoing(isChange){
				this.isChange = isChange;
			},
			changeTab(activeTab) {
				if(this.activeTab != activeTab) {
					if(this.isChange ){
						this.$message({
							type:"error",
							message:"当前内容未保存，请保存后切换！"
						})
						return
					}
					this.activeTab = activeTab
				}
			},

		}
	}
</script>
<style type="text/css" scoped="scoped">
	.resource_tabs {
		width: 100%;
		height: 100px;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 25px 0;
	}
	
	.resource_tabitem {
		width: 33.3%;
		float: left;
		height: 50px;
		text-align: center;
	}
</style>